<template>
  <div class="cont">
    <div class="chart" id="rolling"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { axisData } from './lib/datasets'

export default {
  data() {
    return {
      graph: null,
    }
  },
  methods: {
    initRolling() {
      var chartDom = document.getElementById('rolling')
      var myChart = echarts.init(chartDom)
      myChart.showLoading()

      const seriesData = axisData.map(function (item) {
        let nodeData = item.data.map((id) => {
          return [id, item.name]
        })
        let json = {
          name: item.name,
          type: 'graph',
          layout: 'none',
          coordinateSystem: 'cartesian2d',
          symbol: 'diamond',
          symbolSize: 1,
          label: {
            show: false,
            position: 'top',
            formatter: (ev) => {
              return ev.data[0] + '年'
            },
            color: 'inherit',
            fontSize: 14,
          },
          edgeLabel: {
            show: true,
            color: 'inherit',
            formatter: (ev) => {
              return ev.value || ev.seriesName
            },
          },
          lineStyle: {
            color: 'source',
            opacity: 1,
          },
          edgeSymbol: ['arrow', 'arrow'],
          edgeSymbolSize: [1, 6],
          symbolRotate: 2,
          data: nodeData,
          links: item.links,
        }
        return json
      })

      const legendData = axisData.map(function (item) {
        return item.name
      })

      var option = {
        backgroundColor: 'rgba(0,0,0,1)',
        darkMode: true,
        title: {
          text: '历史朝代',
          textStyle: {
            color: '#fff',
            fontWeight: 400,
          },
        },
        grid: {
          left: '8%',
          bottom: 36,
          right: '10%',
          top: '6%',
        },
        tooltip: {
          show: true,
          formatter: (ev) => {
            let find = axisData.find((it) => it.name == ev.seriesName)
            let str = '未知'
            if (find) {
              let findArr = find.data.map((i) =>
                i < 0 ? '前' + Math.abs(i) + '年' : i + '年'
              )
              str = findArr.join('~')
            }
            return ev.seriesName + '：' + str
          },
          textStyle: {
            fontWeight: 400,
            color: '#000',
          },
        },
        legend: {
          show: true,
          type: 'scroll',
          orient: 'vertical',
          data: legendData,
          textStyle: {
            color: 'inherit',
          },
          top: 15,
          right: 6,
          bottom: 20,
          itemWidth:12,
          itemHeight:16
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          min: -2200,
          max:2000,
          axisLabel: {
            color: '#0775e7',
            fontWeight: 600,
            fontSize: 14,
            formatter: (v) => {
              return v < 0
                ? '公元前' + Math.abs(v) + '年'
                : v == 0
                ? '公元'
                : v + '年'
            },
          },
          axisTick: {
            show: true,
          },
          axisLine: {
            show: true,
            symbol: ['none', 'arrow'],
            lineStyle: {
              color: '#0775e7',
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#0775e7',
            fontWeight: 600,
            fontSize: 12,
          },
          axisLine: {
            show: true,
            onZero: false,
            symbol: ['none', 'pin'],
            lineStyle: {
              color: '#0775e7',
            },
          },
        },
        dataZoom: [
          {
            show: true,
            type: 'slider',
            yAxisIndex: 0,
            left: 6,
            start: 0,
            end: 60,
            width: 20,
            filterMode: 'filter',
            handleSize: 10,
            zoomLock: true,
          },
          {
            show: false,
            type: 'slider',
            showDetail: false,
            startValue: 0,
            endValue: 900,
          },
          {
            type: 'inside', 
            zoomOnMouseWheel: false, 
            moveOnMouseMove: true, 
            moveOnMouseWheel: true, 
          },
        ],
        series: seriesData,
      }

      myChart.setOption(option)
      myChart.hideLoading()

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initRolling()
    })
  },
}
</script>

<style lang="scss" scope>
.cont {
  width: 100%;
  height: 100%;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>
